<template>
  <div class="composition">
    <ul class="title" @mouseover="isshow">
      <li :class="{active:id==1}" data-id="1">海底捞使命</li>
      <li :class="{active:id==2}" data-id="2">价值观</li>
      <li :class="{active:id==3}" data-id="3">内涵</li>
      <li :class="{active:id==4}" data-id="4">海底捞人品质</li>
    </ul>
    <ul class="text" >
      <li v-show="id==1">
        <img src="@/assets/images/composition_001.jpg" alt="">
        <div class="txt">
          <h1>海底捞使命</h1>
          <p>通过精心挑选的产品和创新的服务，创造欢乐火锅时光，向世界各国美食爱好者传递健康火锅饮食文化。</p>
        </div>
      </li>
      <li v-show="id==2">
        <img src="@/assets/images/composition_002.jpg" alt="">
        <div class="txt">
          <h1>价值观</h1>
          <p>一个中心：双手改变命运；
两个基本点：以顾客为中心，以“勤奋者”为本。</p>
        </div>
      </li>
      <li v-show="id==3">
        <img src="@/assets/images/composition_003.jpg" alt="">
        <div class="txt">
          <h1>内涵</h1>
          <p>倡导平等，充分授权；
学习进取，持续创新；
自我批判，三思而行；
诚实守信，敢于负责；
与人为善，知恩图报；
充满激情，团队合作。</p>
        </div>
      </li>
      <li v-show="id==4">
        <img src="@/assets/images/composition_004.jpg" alt="">
        <div class="txt">
          <h1>海底捞人品质</h1>
          <p>诚信、创新、谦虚、勤奋
激情、与人为善、责任感</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ComPosition",
  data(){
    return {
      id:1
    }
  },
  methods: {
    isshow(e){
      if(e.target.tagName === 'LI'){

        this.id = e.target.dataset.id
      }
    
    }
  },
};
</script>

<style lang="less" scoped>
.composition {
  margin-bottom: 60px;
  margin-top: 30px;
  width: 100%;
  // background-color: pink;
  .title {
    padding: 0 100px;
    box-sizing: border-box;
    // justify-content: space-between;
    display: flex;
    margin: 0 auto;
    width: 800px;
    text-align: center;
    // background-color: blue;
    li {
      margin-right: 5px;
      width: 150px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      color: #888;
      border-radius: 30px;
      cursor: pointer;
    }
    li.active{
       background-color: red;
       color: #fff;
    }
  }
  .text{
    margin-top: 30px;
    li{
      display: flex;
      .txt{
        margin-left: 60px;
        width: 200px;
        h1{
          color: #888;
          font-weight: 700;
        }
        p{
          margin-top: 10px;
          color: #666;
          font-size: 16px;
        }
      }
    }
  }
}
</style>